﻿{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>菜单树</h5>
                    <div class="ibox-tools" style="float: left">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a class="collapse-link" href="javascript:add_node();">
                            <i class="glyphicon glyphicon-plus-sign"></i>
                        </a>
                        <a class="collapse-link" href="javascript:edit_node();">
                            <i class="glyphicon glyphicon-edit"></i>
                        </a>
                        <a class="collapse-link" href="javascript:del_node();">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>
                        <a class="collapse-link" href="javascript:location.replace(location.href);">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                    </div>

                    <div id="node_now">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前选中：</div>
                </div>
                <div id="tree"></div>
                <input type="hidden" id="node_id" value="">
                <input type="hidden" id="node_type" value="">
                <input type="hidden" id="node_pid" value="">
            </div>
        </div>
    </div>
</div>
</div>
</body>
{include file="public/footer" /}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    $(function () {
        getMenus();
    })

    function getMenus() {
        $.ajax({
            url: "getMenus",
            type: 'get',
            dataType: 'json',
            success: function (res) {
                $('#tree').treeview({
                    levels: 99,
                    nodeIcon: "",
                    showTags: true,
                    data: res,
                    onNodeSelected: function (event, node) {
                        //获取选中节点数据
                        $('#node_id').val(node.id);
                        $('#node_type').val(node.type);
                        $('#node_pid').val(node.pid);
                        $('#node_now').html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前选中："+node.text);
                    }
                });
            }
        });
    }

    /**
     * 添加节点
     */
    function add_node() {
        var pid=$('#node_id').val();
        var type=$('#node_type').val();
        //按钮节点不能新增下级节点
        if(type==1){
            layer.msg('按钮节点不能新增下级节点！', {icon: 2});
            return;
        }
        layer_open("add?pid="+pid,"新增");
    }

    /**
     * 修改节点
     */
    function edit_node() {
        var id=$('#node_id').val();
        if(id==""){
            layer.msg('请先选择一个菜单！', {icon: 2});
            return;
        }
        layer_open("add?id="+id,"修改");
    }

    function del_node() {
        var id=$('#node_id').val();
        if(id==""){
            layer.msg('请先选择一个菜单！', {icon: 2});
            return;
        }
        //单条删除
        var url = 'del?id=' + id;
        layer.confirm('您确定删除吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            //提交后台
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.rc == 0) {
                        //刷新页面
                        layer.msg('删除成功！', {icon: 1});
                        getMenus();
                        $('#node_id').val("");
                        $('#node_type').val("");
                        $('#node_pid').val("");
                        $('#node_now').html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前选中：");
                    } else {
                        layer.msg('删除失败！', {icon: 2});
                    }
                }
            });
        });
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
